/**
 * @typedef {Object} queryObj
 * @property {string} [status] - 文章状态(1-待审核, 2-审核通过， 不传为全部)
 * @property {string} [channel_id] - 频道id(不传为全部)
 * @property {string} [page='1'] - 当前页码
 * @property {string} [per_page='2'] - 每页条数
 */

/** @type {queryObj} */
const queryObj = {
  status: '',
  channel_id: '',
  page: '1',
  per_page: '2'
}

/** 
 * @type {Number} totalCount - 文章总条数
 */
let totalCount = 0

async function setArticleList() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: queryObj
  })
  console.log(res);
  const htmlStr = res.data.results.map(item => {
    return `           
              <tr>
                <td>
                  <img 
                     src = ${item.cover.type === 0 ? "https://www2.ncwu.edu.cn/__local/0/77/51/22E84A6C3AA68A4CF38D23A733A_59ED45AA_237AC.jpg" : item.cover.images[0]}
                    alt="">
                </td>
                <td>${item.title}</td>
                <td>
                  ${item.status === 1 ? `<span class="badge text-bg-success">审核通过</span>` : `<span class="badge text-bg-primary">待审核</span>`}
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>`
  }).join('')
  document.querySelector('.art-list').innerHTML = htmlStr
  totalCount = res.data.total_count
  document.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`
}

setArticleList()

setChannelList()


try {
  document.querySelectorAll('.form-check-input').forEach(radio => {
    radio.addEventListener('change', e => {
      queryObj.status = e.target.value
    })
  })
  document.querySelector('.form-select').addEventListener('change', e => {
    queryObj.channel_id = e.target.value
  })
  document.querySelector('.sel-btn').addEventListener('click', () => {
    setArticleList()
  })
} catch (error) {
  console.log(error);
  alert('查询失败！')
}


document.querySelector('.next').addEventListener('click', e => {
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++
    document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
    setArticleList()
  }
})

document.querySelector('.last').addEventListener('click', e => {
  if (queryObj.page > 1) {
    queryObj.page--
    document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
    setArticleList()
  }
})



document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id
    const res = await axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: 'delete'
    })
    const children = document.querySelector('.art-list').children
    if (children.length === 1 && queryObj.page != 1) {
      queryObj.page--
      document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
    }
    console.log(res);
    setArticleList()
  }
})



document.querySelector('.art-list').addEventListener('click', e => {
  if (e.target.classList.contains('edit')) {
    const artID = e.target.parentNode.dataset.id
    console.log(artID);

    location.href = `../publish/index.html?id=${artID}`
  }
})

